<template>
  <div>
    <template v-if="condition">
      <div v-if="fieldType == 'Text'">
        <textInput
          :value="conditionValue"
          :props="condition.props"
          @input="dataInput"
          @display="dataDisplay"
        />
      </div>
      <div v-else-if="fieldType == 'Date'">
        <datePicker
          :value="conditionValue"
          :props="condition.props"
          @input="dataInput"
          @display="dataDisplay"
        />
      </div>
      <div v-else-if="fieldType == 'DateRange'">
        <daterangePicker
          :value="conditionValue"
          :props="condition.props"
          @input="dataInput"
          @display="dataDisplay"
        />
      </div>
      <div v-else-if="fieldType == 'Number'">
        <numberInput
          :value="conditionValue"
          :props="condition.props"
          @input="dataInput"
          @display="dataDisplay"
        />
      </div>
      <div v-else-if="fieldType == 'Selection'">
        <selection
          :value="conditionValue"
          :props="condition.props"
          @input="dataInput"
          @display="dataDisplay"
        />
      </div>
      <div v-else-if="fieldType == 'MultiSelection'">
        <multiSelection
          :value="conditionValue"
          :props="condition.props"
          @input="dataInput"
          @display="dataDisplay"
        />
      </div>
      <div v-else-if="fieldType == 'CompanySelection'">
        <companySelection
          :value="conditionValue"
          :props="condition.props"
          @input="dataInput"
          @display="dataDisplay"
        />
      </div>
      <div v-else-if="fieldType == 'EmployeeSelection'">
        <employeeSelection
          :value="conditionValue"
          :props="condition.props"
          @input="dataInput"
          @display="dataDisplay"
        />
      </div>
      <div v-else-if="fieldType == 'InsureTypeSelection'">
        <insureTypeSelection
          :value="conditionValue"
          :props="condition.props"
          @input="dataInput"
          @display="dataDisplay"
        />
      </div>
      <div v-else-if="fieldType == 'ExpenseTypeSelection'">
        <expenseTypeSelection
          :value="conditionValue"
          :props="condition.props"
          @input="dataInput"
          @display="dataDisplay"
        />
      </div>
      <div v-else-if="fieldType == 'CheckBox'">
        <checkBox
          :value="conditionValue"
          :props="condition.props"
          @input="dataInput"
          @display="dataDisplay"
        />
      </div>
    </template>
    <template v-else>请设置字段</template>
  </div>
</template>
<script>
import textInput from '@/views/web/flowManage/components/formField/textInput.vue'
import numberInput from '@/views/web/flowManage/components/formField/numberInput.vue'
import datePicker from '@/views/web/flowManage/components/formField/datePicker.vue'
import daterangePicker from '@/views/web/flowManage/components/formField/daterangePicker.vue'
import selection from '@/views/web/flowManage/components/formField/selection.vue'
import multiSelection from '@/views/web/flowManage/components/formField/multiSelection.vue'
import companySelection from '@/views/web/flowManage/components/formField/companySelection.vue'
import employeeSelection from '@/views/web/flowManage/components/formField/employeeSelection.vue'
import insureTypeSelection from '@/views/web/flowManage/components/formField/insureTypeSelection.vue'
import expenseTypeSelection from '@/views/web/flowManage/components/formField/expenseTypeSelection.vue'
import checkBox from '@/views/web/flowManage/components/formField/checkBox.vue'
export default {
  components: {
    textInput,
    numberInput,
    datePicker,
    daterangePicker,
    selection,
    multiSelection,
    companySelection,
    employeeSelection,
    insureTypeSelection,
    expenseTypeSelection,
    checkBox,
  },
  props: ['condition', 'disabled'],
  data: function () {
    return {}
  },
  methods: {
    dataInput(val) {
      if (JSON.stringify(val) != JSON.stringify(this.condition.FLBC_Value)) {
        this.$emit('change', val)
      }
      this.condition.FLBC_Value = val
    },
    dataDisplay(val) {
      this.condition.FLBC_DisplayValue = val
    },
  },
  computed: {
    conditionValue() {
      return this.condition.FLBC_Value
    },
    fieldType() {
      return this.condition ? this.condition.FFLD_TypeDesc : null
    },
  },
}
</script>
<style>
</style>